<template>
  <div class="radio-container">
    <div :class="['cube', check == item.id ? 'active' : '']" v-for="(item, index) in data" :key="item.id" :id="item.id" :style="{background: item.color}" :data-index="index" @click="checkColor"></div>
  </div>
</template>

<script>
import { toRefs, ref, watch } from 'vue'
export default {
    name: 'RadioItem',
    props: {
        data: {
            type: Array,
            default() {
                return []
            }
        },
        modelValue: {
            type: [String, Number],
            default: ''
        },
    },
    emits: ['update:modelValue'],
    setup(props, context) {
        const { modelValue, data } = toRefs(props)
        let check = ref(modelValue.value || data.value[0].id)
        const checkColor = (e) => {
            const id = e.target.id
            context.emit('update:modelValue', id)
            check.value = id
        }
        watch(() => modelValue.value, 
            (oldVal, newVal) => {
                const val = oldVal || newVal 
                check.value = val
            }
        )
        return {
            check,
            checkColor
        }
    }
}
</script>

<style scoped lang="scss">
.radio-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .cube{
        width: 15px;
        height: 15px;
        border-radius: 2px;
        margin-right: 5px;
        cursor: pointer;
    }
    .active {
        position: relative;
        &::after{
            content: "";
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 2px;
            position: absolute;
            border: 1px solid var(--ss-color-primary-light2);
        }
    }
}
</style>